<template>
	<view class="page-index">
		<view class="hd">
			<view class="info">
				<view class="info-hd">就诊人:</view>
				<view class="info-bd">{{item.patn_name}}</view>
			</view>
			<view class="info-icon">
				<!-- <img class="info-icon-img" src="../../../assets/info-icon.png" alt=""> -->
			</view>
			<view class="bg"></view>
		</view>
		
		<view class="bd">
			<view class="box">
				<!-- <view class="">
					<view class="">
						{{option}}
					</view>
				</view> -->
				<view class="box-hd">
					
					<view class="box-hd-label">就诊日期</view>
					<view class="" style="display:flex;">
						<view class="box-hd-value">{{item.mdtrt_date}}&emsp;</view>
						<view class="box-hd-value">{{item.begntime}}</view>
						<view style="color: gray;">
							&nbsp;到&nbsp;
						</view>
						<view class="box-hd-value">{{item.endtime}}</view>
					</view>
				</view>
				<view class="box-bd">
					<view class="box-item">
						<view class="box-bd-label">科室</view>
						<view class="box-bd-value">{{item.dept_name}}</view>
					</view>
					<view class="box-item">
						<view class="box-bd-label">诊室</view>
						<view class="box-bd-value">{{item.room_name}}</view>
					</view>
					<view class="box-item">
						<view class="box-bd-label">医师</view>
						<view class="box-bd-value">{{item.dr_name}}</view>
					</view>
				</view>
				<view class="box-ft">
					<view class="box-ft-label">挂号费用</view>
					<view class="box-ft-value">{{item.sumfee}}元</view>
				</view>
				<view class="box-append" @click="handleActionsheet">
					查看明细
				</view>
			</view>
			<!-- <view class="bd-append">
        {{res}}
      </view> -->
	  
	  <view class="" v-if="item.ordr_stas=='02' || item.ordr_stas=='03'" style="width: 100%;padding: 45rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;">
	  	<uv-qrcode ref="qrcode" size="500rpx" :value="item.mdtrt_sid"></uv-qrcode>
	  	<view class="codetetx" style="padding-top: 30rpx;">
	  		<span>结算码：{{item.mdtrt_sid}}</span>
	  	</view>
	  </view>
		</view>
		<view class="ft" style="display: flex;">
			<view class="" v-if="item.ordr_stas=='01'">
				<view class="" style="color: gray;" @click="showCancel=true">取消预约</view>
			</view>
			<view class="" v-if="item.ordr_stas=='01'">
				<view class=""  v-if="item.yjssumfee>0">
					<view class="displayss"  v-if="item.chrg_type=='1'">
						<view class="btn" style="background-color: #1AAD19; " @click="pays(item.biz_ord_no)">微信自费</view>
					</view>
					<view class="displayss" v-else>
						<view class="displayss"  v-if="authCode">
							<view class="btn" :class="GetPayAuthNoshow?'':'elementopacity'" style="background-color: #0197F6;margin-right: 30rpx;" @click="GetPayAuthNo" >医保支付</view>
							<view class="btn" style="background-color: #1AAD19; " @click="pays(item.biz_ord_no)">微信自费</view>
						</view>
						<view class="displayss"  v-else>
							<view class="btn" style="background-color: #0197F6; margin-right: 30rpx;" v-if="payurl" @click="GetPayAuthNo">医保支付</view>
							<view class="btn" :class="Configdetailshow?'':'elementopacity'" style="background-color: #0197F6; margin-right: 30rpx;" v-else  @click="Configdetail">医保授权</view>
							<view class="btn" style="background-color: #1AAD19; " @click="pays(item.biz_ord_no)">微信自费</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="btn" style="background-color: #27BF86;margin-right: 30rpx;">提交预约</view>
				</view>
			</view>
			<view class="" v-else-if="item.ordr_stas=='02'|| item.ordr_stas == '03' || item.ordr_stas == '04'">
				<view class=""  v-if="item.allo_refd_flag=='2'">
					<view class="displayss" v-if="item.PayType=='2'">
						<view class="" v-if="authCode">
							<view class="btn" style="background-color: #0197F6;margin-right: 30rpx;" @click="YBRefund">医保退款</view>
						</view>
						<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 100%;" >
							<view class="" style="color: gray;margin-right: 15rpx;font-size: 20rpx;">退款授权后才可进行医保退款&emsp;</view>
							<view class="btn" style="background-color: #0197F6;margin-right: 30rpx;" @click="Configdetail">医保退款授权</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="btn" style="background-color: #27BF86;margin-right: 30rpx;" @click="TJRefund(item.biz_ord_no)">微信自费退款</view>
					</view>
				</view>
			</view>
			<view class="" v-else-if="item.ordr_stas=='03' || item.ordr_stas=='06'">
			</view>
		</view>
		<view class="actionsheet" v-show="actionsheetVisible">
			<view class="actionsheet-mask" @click="handleActionsheet"></view>
			<view class="actionsheet-panel">
				<view class="actionsheet-hd">
					<view class="actionsheet-hd-tt">预约就诊明细</view>
					<i class="actionsheet-icon-close" @click="handleActionsheet"></i>
				</view>
				<view class="actionsheet-bd">
					<view class="actionsheet-box">
						<view class="actionsheet-box-hd">基本信息</view>
						<view class="actionsheet-box-bd">
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">预约类别</view>
								</view>
								<view class="actionsheet-box-item-value">预约挂号</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">预约科室</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.dept_name}}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">预约诊室</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.room_name}}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">医生姓名</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.dr_name}}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">挂号费用</view>
								</view>
								<view class="actionsheet-box-item-value em">{{item.sumfee}}</view>
							</view>
						</view>
					</view>
					<view class="actionsheet-box">
						<view class="actionsheet-box-hd">时间信息</view>
						<view class="actionsheet-box-bd">
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">就诊日期</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.mdtrt_date}}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">开始时间</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.begntime }}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">截止时间</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.endtime}}</view>
							</view>
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">锁号失效时间</view>
								</view>
								<view class="actionsheet-box-item-value">{{item.lck_souc_endtime}}</view>
							</view>
						</view>
					</view>
					<view class="actionsheet-box">
						<view class="actionsheet-box-hd">状态信息</view>
						<view class="actionsheet-box-bd">
							<view class="actionsheet-box-item">
								<view class="actionsheet-box-item-label-wrap">
									<view class="actionsheet-box-item-label">预约状态</view>
								</view>
								<view class="actionsheet-box-item-value" style="color: #E6A23C;"
									v-if="item.ordr_stas=='01'">
									<span>等待支付</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #C0C0C0;"
									v-if="item.ordr_stas=='06'">
									<span>已退号</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #C0C0C0;"
									v-if="item.ordr_stas=='05'">
									<span>已取消</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #C0C0C0;"
									v-if="item.ordr_stas=='07'">
									<span>已作废</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #C0C0C0;"
									v-if="item.ordr_stas=='04'">
									<span>已过号</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #27BF86;"
									v-if="item.ordr_stas=='02'">
									<span>已预约</span>
								</view>
								<view class="actionsheet-box-item-value" style="color: #0197F6;"
									v-if="item.ordr_stas=='03'">
									<span>已就诊</span>
								</view>
							</view>
						</view>
					</view>
		
				</view>
			</view>
		</view>
		<u-modal v-model="TJRefundshow" confirm-color='#3B71E8' content="退款后将取消此订单,是否确认?" show-cancel-button="true"
			@confirm="TJRefundconfirm" @cancel="TJRefundshow==false" mask-close-able="true"></u-modal>
			<u-modal v-model="TJRefundshowyb" confirm-color='#3B71E8' content="退款后将取消此订单,是否确认?" show-cancel-button="true"
				@confirm="YBRefund" @cancel="TJRefundshowyb==false" mask-close-able="true"></u-modal>
		<u-modal v-model="showCancel" title="确认取消预约" :show-cancel-button="true" :show-confirm-button="true"  @confirm="Cancel">
			<view class="xw">
				取消预约后不可恢复，是否确认?
			</view>
		  </u-modal>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	export default {
		name: 'PageIndex',
		data() {
			return {
				Configdetailshow:true,
				GetPayAuthNoshow:true,
				TJRefundshow:false,
				TJRefundshowyb:false,
				showCancel:false,
				authCode:'',
				item: {
					DoctorName: "",
					DptId: "",
					DptName: "",
					Memo: "",
					Mobile: "",
					OrderId: "",
					OrderNumber: "",
					PatientName: "",
					PayNumber: "",
					Status: '',
					VisitDay: "",
					VisitTime: "",
					GHF: 0,
					mdtrt_sid:''
				},
				res:'',
				actionsheetVisible: false,
				biz_ord_no: '',
				option:''
			}
		},
		onLoad:function(option) {
			if(!option.biz_ord_no){
				uni.showToast({
					title: '链接出错请重新打开',
					icon: 'none',
					duration: 2000
				});
				return
			}
			this.biz_ord_no = option.biz_ord_no
			if(option.authCode){
				this.authCode=option.authCode
			}else{
				this.authCode=''
			}
			this.getDetail()
		},
		methods: {
			TJRefundyb(biz_ord_no) {
				this.biz_ord_no = biz_ord_no
				this.TJRefundshow = true
			},
			YBRefund(){
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				this.$request("HisRegist", "YBRefund", {
					OrderNo: this.biz_ord_no,
					authCode: this.authCode
				}).then(res => {
					// this.res=res
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack()
					}
				}).catch(err => {
					// this.res=err
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: 'err',
						icon: 'none',
						duration: 1000
					});
				});
			},
			couponQrCode() {
				var qr = new UQRCode();
				qr.data = this.item.mdtrt_sid;
				qr.size = 200;
				qr.make();
				var canvasContext = uni.createCanvasContext('qrcode', this);
				qr.canvasContext = canvasContext;
				qr.drawCanvas();
			},
			aaa(){
				uni.showToast({
					title: '请勿多次点击',
					icon: 'none',
					duration: 1000
				});
			},
			TJRefundconfirm() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				this.$request("HisDuty", "Refund", {
					OrderNo: this.biz_ord_no,
					RefundReson: ''
				}).then(res => {
					// this.res=res
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack()
					}
				}).catch(err => {
					// this.res=err
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: 'err',
						icon: 'none',
						duration: 1000
					});
				});
			},
			TJRefund(biz_ord_no) {
				this.biz_ord_no = biz_ord_no
				this.TJRefundshow = true
			},
			pays(TJRegNo) {
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				let thenthis = this
				this.$request("HisDuty", "ZFPay", {
					OrderNo: TJRegNo
				}).then(resa => {
					// console.log("支付", resa)
					// this.res=resa
					if (resa.code == 1) {
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": resa.data.appId, //公众号ID，由商户传入     
								"timeStamp": resa.data.timeStamp, //时间戳，自1970年以来的秒数     
								"nonceStr": resa.data.nonceStr, //随机串     
								"package": resa.data.package,
								"signType": resa.data.signType, //微信签名方式：     
								"paySign": resa.data.paySign //微信签名 
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									uni.showToast({
										title: "成功支付",
										icon: "none",
										duration: 2000,
									});
									uni.redirectTo({
										url:'/pages/register/Scheduling/record/record'
									})
								} else {
									uni.showToast({
										title: "支付未成功",
										icon: "none",
										duration: 2000,
									});
								}
							});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: resa.msg,
							icon: 'none',
							duration: 2000
						});
						this.GetOrderList()
					}
				}).catch(err => {
					this.show = true
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 1000
					});
				});
			},
			
			GetPayAuthNo(){
				if(this.GetPayAuthNoshow===false){
					uni.showToast({
						title: '请勿多次点击',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.GetPayAuthNoshow=false
				this.$request("HisRegist", "GetPayAuthNo", {
					OrderNo: this.biz_ord_no,
					authCode:this.authCode
				}).then(res => {
					console.log("医保支付", res)
					// this.res=res
					if (res.code == 1) {
						// OrderNo    payAuthNo   uldLatlnt
						let objs={
							OrderNo:res.data.OrderNo,
							payAuthNo:res.data.payAuthNo,
							uldLatlnt:res.data.uldLatlnt,
						}
						let obj=JSON.stringify(objs)
						this.GetPayAuthNoshow=true
						
						uni.navigateTo({
							url:`/pages/Yibao/pay/indexyb?obj=${obj}`
						})
					} else {
						uni.hideLoading();
						this.GetPayAuthNoshow=true
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			Configdetail(){
				if(this.Configdetailshow===false){
					uni.showToast({
						title: '请勿多次点击',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.Configdetailshow=false
				uni.showLoading({
					title: '请稍后'
				})
				this.$request("HisRegist", "Configdetail").then(res => {
					if (res.code == 1) {
						console.log("res",res)
						let config=res.data
						uni.hideLoading();
						let ecod=config.redirectUrl+'?biz_ord_no=' + this.biz_ord_no
						let encodedStr = encodeURIComponent(ecod);
						console.log(encodedStr);
						let url = config.YBSQUrl + '?authType=2' + '&isDepart=2'
						+ '&appid=' + config.appid + '&cityCode=' + config.cityCode +
						'&channel=' + config.channel+
						'&orgChnlCrtfCodg=' + config.orgChnlCrtfCodg+
						'&orgCodg=' + config.orgCodg+
						'&bizType=' + config.bizType+
						'&orgAppId=' + config.orgAppId +
						'&redirectUrl=' + encodedStr;
						// +'?biz_ord_no=' + this.biz_ord_no
						console.log("url",url)
						this.Configdetailshow=true
						window.location.href= url
					} else {
						uni.hideLoading();
						this.Configdetailshow=true
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
				
			},
						
			Cancel(){
				uni.showLoading({
					title: '正在取消预约'
				})
				this.$request("HisRegist", "Cancel", {
					OrderNo: this.biz_ord_no
				}).then(res => {
					// console.log("取消", res)
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
						
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getDetail() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$request("HisRegist", "Detail", {
					OrderId: this.biz_ord_no
				}).then(res => {
					console.log("详情", res)
					if (res.code == 1) {
						this.item = res.data[0]
						if(res.data[0].ordr_stas=='02' || res.data[0].ordr_stas=='03'){
							this.couponQrCode()
						}
						
						
						uni.hideLoading();

					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			}
		}
	}
</script>

<style scoped>
	@import './index.css';
	@import './actionsheet.css';
</style>